@file:OptIn(ExperimentalMaterialApi::class)

package com.example.mycomposelesson.ui

import android.graphics.Paint
import androidx.activity.compose.BackHandler
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.mycomposelesson.R
import com.example.mycomposelesson.ui.theme.MyComposeLessonTheme
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

@Preview( showBackground = true,
    widthDp = 1920,
    heightDp = 1024,)
@Composable
fun LayoutDemoPreview(){
   MyComposeLessonTheme {
       ScaffoldDemo()
   }
}


@Composable
fun ScaffoldDemo(){
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    var selectedItem by remember { mutableStateOf(0) }
    val items = listOf("主页", "我喜欢的","动画", "设置")
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                        Text("主页",
                            modifier=Modifier.fillMaxWidth(),
                            textAlign= TextAlign.Center,
                            style=MaterialTheme.typography.h4)
                },
                navigationIcon = {
                    IconButton(onClick = {

                    }) {
                        Icon(Icons.Filled.ArrowBack, null)
                    }
                },
                actions = {
                    IconButton(
                        onClick = { } //do something
                    ) {
                        Icon(Icons.Filled.Search, null)
                    }
                    IconButton(
                        onClick = { } //do something
                    ) {
                        Icon(Icons.Filled.MoreVert, null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavigation {
                items.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        icon = { when(index){
                            0 -> Icon(Icons.Filled.Home, contentDescription = null)
                            1 -> Icon(Icons.Filled.Favorite, contentDescription = null)
                            2->  Icon(Icons.Filled.AccessAlarm, contentDescription = null)
                            else -> Icon(Icons.Filled.Settings, contentDescription = null)
                        } },
                        label = { Text(item) },
                        selected = selectedItem == index,
                        onClick = { selectedItem = index }
                    )
                }
            }
        },
        drawerContent={
            AppDrawerContent(scaffoldState,scope)}
    ){
        Surface(
            modifier = Modifier.fillMaxSize()
                .padding(bottom = (it.calculateBottomPadding()+10.dp)),
            color = MaterialTheme.colors.background
        ) {
            when(selectedItem)
            {
                0->  ControlTest()
                1->  BackdropScaffoldDemo()
                2->  AnimateDemo()
                3->  TextPractise()
            }

        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun AppDrawerContent(
    scaffoldState: ScaffoldState,
    scope: CoroutineScope
) {

    Box {
        Image(
            painter = painterResource(id = R.drawable.background),
            contentDescription = null
        )
        Column(
            modifier = Modifier.padding(15.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.img),
                contentDescription = null,
                modifier = Modifier
                    .clip(CircleShape)
                    .size(65.dp)
                    .border(BorderStroke(1.dp, Color.Gray), CircleShape)
            )
            Spacer(Modifier.padding(vertical = 8.dp))
            Text(
                text = "游客12345",
                style = MaterialTheme.typography.body2
            )
        }
    }

    ListItem(
        icon = {
            Icon(Icons.Filled.Home, null)
        },
        modifier = Modifier
            .clickable {

            }
    ) {
        Text("首页")
    }

    Box(
        modifier = Modifier.fillMaxHeight(),
        contentAlignment= Alignment.BottomStart
    ) {
        TextButton(
            onClick = { /*TODO*/ },
            colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colors.onSurface),
        ) {
            Icon(Icons.Filled.Settings, null)
            Text("设置")
        }
    }

    // 编写逻辑
    // 如果 drawer 已经展开了，那么点击返回键收起而不是直接退出 app

    BackHandler(enabled = scaffoldState.drawerState.isOpen) {
        scope.launch {
            scaffoldState.drawerState.close()
        }
    }
}